<!-- 绿色通道 - 患者列表 - 医疗记录 - 急救进程(时间轴) 界面 -->
<template>
  <div id="box">
    <div style="width: 100%;border-bottom: 1px solid #DFDEE3;margin: -11px 0px 10px 0px" />
    <!-- <div id="summaryCount" class="tab-content tab_content_div" style="margin-top: 100px"></div> -->
    <div id="firstaid" class="tab-pane active">
      <div style="width: 100%;height: 10px" />
      <div style="width: 100%;background-color: #4380EB;height: 60px;line-height: 60px;font-size: 16px;padding-left: 15px;">
        <span class="basedata">患者编号：{{ persondata.id }}</span>
        <span class="basedata">患者姓名：{{ persondata.name }}</span>
        <span class="basedata">年龄：{{ persondata.age }}</span>
        <span class="basedata">民族：{{ persondata.ethnicity }}</span>
        <span class="basedata">出生日期：{{ splitDate(persondata.birthday) }}</span>
        <span class="basedata">身份证号：{{ persondata.replaceIDcard }}</span>
        <span class="basedata">联系电话：{{ persondata.contactphone }}</span>
        <span class="basedata">社保卡号：{{ persondata.sscardnumber }}</span>
        <span class="basedata_last">住院号：{{ persondata.inpatientId }}</span>
      </div>

      <div class="timeline">
        <div class="radio" style="float: right;margin-right: 2%;margin-bottom: 30px">
          排序：
          <el-radio-group v-model="reverse">
            <el-radio :label="true">倒序</el-radio>
            <el-radio :label="false">正序</el-radio>
          </el-radio-group>
        </div>
        <div style="clear: both" />
        <div id="aidYear" style="float: left;font-size: 30px">{{ year }}</div>
        <el-timeline style="width: 94%;float: left;padding-left: 45px;" :reverse="reverse">
          <el-timeline-item v-for="(activity, index) in test.activities" :key="index" icon="el-icon-location" class="timeLine">
            <el-card shadow="never">
              <div style="padding-left:30px;width: 98%;line-height: 60px;font-size: 16px;background-color: rgb(242, 242, 242);float: left;position: absolute;z-index: 1;">
                <div style="float: left">{{ activity.time }}</div>
                <div style="background-color: #aaaaaa;margin: 10px;width: 2px;height: 40px;float: left" />
                <div>
                  <div style="margin-left: 30px;margin-right: 20px;line-height: 50px;display: block;float: left;width: 170px;white-space: nowrap;">{{ activity.title }}</div>
                  <div v-if="activity.content" class="margin-40" style="width: 8px;height: 8px;background-color: rgb(4, 192, 227);border-radius: 50%;margin-top: 22px" />
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="activity.prompt_text"
                    placement="top-start"
                    popper-class="test"
                    visible-arrow="flase"
                  >
                    <div style="margin-left: 12px;line-height: 50px;display: block;float: left;width: 300px;">
                      {{ activity.content }}</div>
                  </el-tooltip>
                </div>
              </div>
            </el-card>
          </el-timeline-item>
        </el-timeline>

      </div>
    </div>
  </div>
</template>

<script>
import { getPatientInfo, queryTimelinePost } from '@/api/green-channel/tab-request'

export default {
  props: ['checkrowdata'], // 由主页面(父组件) 接收来的, 选择项的数据
  data() {
    return {
      reverse: false,
      persondata: {},
      year: '',
      test: {
        activities: []
      }
    }
  },
  computed: {},
  updated() { },
  created() {
    // console.log("时间轴接受值", this.checkrowdata)
    getPatientInfo(this.checkrowdata.patientId).then(res => {
      if (res) {
        res.replaceIDcard = res.idcardid?res.idcardid.replace(/^(.{6})(?:\w+)(.{4})$/, '\$1******\$2'):''
        this.persondata = res
        this.persondata.id = this.checkrowdata.dispatchId
        // this.count = res.count
        console.log("res",res)
        this.aidProcess()
      }
    })
  },
  methods: {
    splitDate(date) {
      if (date) {
        return date.split(' ')[0]
      } else {
        return
      }
    },

    // 急救进程接口
    aidProcess() {
      queryTimelinePost(this.checkrowdata.dispatchId).then(res => {
        console.log('急救进程', res)
        // 迁移代码，功能不明
        // if (data.length == 0) {
        //   let first_aid_process = 0;
        //   $.cookie("first_aid_process", first_aid_process);
        // } else {
        //   let first_aid_process = 1;
        //   $.cookie("first_aid_process", first_aid_process);
        // }

        if (res.data && res.data.length > 0) {
          if (res.data[0].length <= 0) {
            return
          } else {
            if (res.data[0].time === undefined) { res.data[0].time = [] }
          }
          // console.log(data);
          // 截取年
          var dateStr = res.data[0].time
          var year = dateStr.substring(0, 4)
          // console.log(year);
          this.year = year
          // $("#aidYear").text(year)
          // for (let i = 0; i < data.length; i++) {                //迁移代码，功能不明
          //   console.log(data[i].time);
          //   //截取年份剩下的日期
          //   var dateString = data[i].time;
          //   var xxtime = dateString.substring(5);
          //   // console.log(xxtime);
          //   if (data[i].tips == '否') {
          //     data[i].if = false;
          //   } else {
          //     data[i].if = true;
          //   }
          // }
          this.test.activities = res.data
          const arrAfter = []
          this.test.activities.forEach(item => {
            item.prompt_text = this.test.activities.prompt_text
            // console.log(item)
            arrAfter.push(item)
          })
          // 提示信息先写死
          for (let i = 0; i < this.test.activities.length; i++) {
            if (this.test.activities[i].content !== null) {
              if (this.test.activities[i].content.indexOf('FMC2ECG') !== -1) {
                this.test.activities[i].prompt_text = '所有患者首次医疗接触至首份心电图（FMC2EKG）时间；≤10分钟以内的比例'
              }
              if (this.test.activities[i].content.indexOf('ECG至确诊') !== -1) {
                this.test.activities[i].prompt_text = 'STEMI患者首份ECG（远程传输或院内）至心电图确诊时间；≤10分钟比例'
              }
              if (this.test.activities[i].content.indexOf('激活时间') !== -1) {
                this.test.activities[i].prompt_text = '120急救或转运且拟行PPCI患者直达导管室比例：绕行急诊及CCU（STEMI）'
              }
              if (this.test.activities[i].content.indexOf('通知CT室至完成准备') !== -1) {
                this.test.activities[i].prompt_text = ''
              }
              if (this.test.activities[i].content.indexOf('D2B') !== -1) {
                this.test.activities[i].prompt_text = ' 首次医疗接触到导丝通过(D2B)时间'
              }
              if (this.test.activities[i].content.indexOf('S2FMC') !== -1) {
                this.test.activities[i].prompt_text = 'STEMI患者症状到首次医疗接触（S2FMC）时间'
              }
              if (this.test.activities[i].content.indexOf('肌钙蛋白报告') !== -1) {
                this.test.activities[i].prompt_text = ''
              }
            }
          }
        }
      })
    }
    //   error() {
    //     appConfig.errorAlert("错误");
    //   }
    // });
  }
}
</script>

<style scoped>
  #box {
    /* background-color: #ffffff; */
    width: 100%;
    height: 100%;
  }
  .daochushuju{
    border: 1px solid #fff;
    width: 60px;
    height: 20px;
    background-color: #fff;
    position: absolute;
    top: 30px;
    right: 6px;
    text-align: center;
    line-height: 20px;
    border-radius: 4px;
  }
  .height-200px {
    height: 300px;
  }

  .content-type {
    padding: 15px;
  }

  .group-div {
    padding-top: 20px;
  }

  .bingzhuangtu {
    width: 24%;
    margin: 0px 0.5% 20px 0.5%;
    padding: 30px 20px 20px 20px;
    background-color: #fff;
  }

  .active_tab_left {
    background-color: #ffffff;
    text-align: center;
    width: 130px;
    border: 1px solid #DFDEE3;
    position: relative;
    /*margin-bottom: 10px;*/
    border-radius: 0;
    margin-right: -3px;
    font-size: 16px;
    color: #394455;
  }

  .active_tab_right {
    background-color: #ffffff;
    position: relative;
    text-align: center;
    width: 130px;
    border: 1px solid #DFDEE3;
    /*margin-bottom: 10px;*/
    border-radius: 0;
    margin-right: -3px;
    font-size: 16px;
    color: #394455;
  }

  .nav-pills>li>a {
    border-radius: 1px;
  }

  .basedata {
    color: #FFFFFF;
    padding: 0px 10px;
    border-right: 2px solid #FFFFFF;
    font-size: 16px;
  }

  .basedata_last {
    color: #FFFFFF;
    padding: 0px 10px;
    font-size: 16px;
  }

  .timeline {
    padding: 30px 30px 0px 30px;
  }

  .nav-pills>li.active>a,
  .nav-pills>li.active>a:hover,
  .nav-pills>li.active>a:focus {
    background-color: #4380EA;
    color: #fff;
  }

  .el-collapse,
  .el-collapse-item__wrap,
  .el-collapse-item__header {
    border: 0px;
  }

  .el-collapse-item__wrap {
    border-radius: 10px;
  }

  .el-collapse-item__content {
    background-color: #FFFFFF;
    padding: 30px 0px 0px 0px;
    border-radius: 10px;
    margin-bottom: 1px;
  }

  .el-card {
    border: 0px;
  }

  .el-card__body {
    padding: 0px;
    background-color: #ffffff;
  }

  .el-collapse-item__header {
    border-radius: 3px;
    padding-left: 5px;
    z-index: 5;
    position: sticky;
    opacity: 0.3;
  }

  .el-collapse-item__header,
  .card {
    background-color: #F4F4F4;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    height: 60px;
    line-height: 60px;
    color: #303133;
    font-size: 16px;
    font-weight: 500;
    outline: 0;
  }

  .el-timeline-item {
    padding-bottom: 85px;
  }

  /*时间块*/
  .el-timeline-item__wrapper {
    position: relative;
    padding-left: 48px;
  }

  /*时间标签*/
  .el-timeline-item__timestamp {
    color: #000000;
    line-height: 1;
    font-size: 15px;
  }

  /*节点样式*/
  .el-timeline-item__node--normal {
    left: -20px;
    top: 0px;
    width: 50px;
    height: 50px;
  }

  .el-timeline-item__node {
    /* background: url("static/images/timeline.png") no-repeat; */
    background-size: cover;
  }

  .timelinediv {
    border: 1px solid #DDDEE2;
    padding: 10px 15px;
    line-height: 40px;
    border-radius: 10px;
    height: 60px;
    font-size: 16px;
  }

  /*      11.12 上报表单样式*/
  /* 表单标题样式*/
  .hzxx {
    color: #464c5b;
    font-size: 16px;
    font-weight: bold;
    float: left;
    margin-left: 15px;
    width: 100px;
  }

  /*蓝色竖线*/
  .isActive {
    width: 5px;
    height: 20px;
    float: left;
    margin-left: 20px;
    background-color: rgb(67, 128, 234);
    border-radius: 28%;
  }

  /*灰色竖线*/
  .noActive {
    width: 5px;
    height: 20px;
    float: left;
    margin-left: 20px;
    background-color: #f2f2f2;
    border-radius: 28%;
  }

  .isActive_one {
    width: 5px;
    height: 20px;
    float: left;
    margin-left: 20px;
    border-radius: 28%;
  }

  /*输入框的宽度*/
  .ivu-input-wrapper {
    display: inline-block;
    width: 55%;
    position: relative;
    vertical-align: middle;
    line-height: normal;
  }

  /*label标签*/
  label {
    float: left;
    font-weight: normal;
    line-height: 30px;
    margin-left: 10px;
  }

  .label-font {
    color: red;
  }

  .label-font-second {
    color: #131313;
  }

  .border-width {
    width: 80%;
  }

  /*圆角边框*/
  .box-style {
    width: 98%;
    height: 150px;
    border: 1px solid #dddee2;
    border-radius: 10px;
    margin: 113px 7px 0px 18px;
  }

  .box-style-two {
    width: 98%;
    height: auto;
    border: 1px solid #dddee2;
    border-radius: 10px;
    margin: 113px 7px 0px 2px;
  }

  /*患者转正的字体颜色*/
  .patients_turn {
    color: red;
  }

  .box-second-style {
    width: 95%;
    height: 60px;
    border: 1px solid #dddee2;
    border-radius: 10px;
    margin: 0px 0px 10px 15px
  }

  /*去掉文本域边框*/
  textarea {
    /* overflow: auto;
             background-attachment: fixed;
             background-repeat: no-repeat;
             border-style: solid;
             border-color: #FFFFFF;
             width: 100%;
             margin: 5px;*/
    width: 98%;
    height: 86px;
    border: 1px solid #dddee2;
    border-radius: 10px;
    margin: 0px 0px 10px 15px
  }

  .box-third-style {
    width: 98%;
    height: 86px;
    border: 1px solid #dddee2;
    border-radius: 10px;
    margin: 85px 0px 4px 15px
  }

  .box-four-style {
    width: 98%;
    height: 86px;
    border: 1px solid #dddee2;
    border-radius: 10px;
    margin: 91px 0px 6px 23px;
  }

  .margin-15 {
    margin-top: 15px;
  }

  .margin-10 {
    margin-top: 15px;
  }

  /*日期选择器的宽度*/
  .date-picker-width {
    width: 350px;
  }

  .date-picker-width2 {
    width: 278px;
  }

  .btn_jijiu {
    width: 90px;
    height: 35px;
    font-size: 16px;
    color: white;
    background-color: #4380EA;
    margin-right: 20px;
  }

  .btn_back {
    width: 90px;
    height: 35px;
    font-size: 16px;
    color: #4380EA;
    background-color: white;
  }

  .icon_btn {
    display: inline;
  }

  .layui-laypage .layui-laypage-curr .layui-laypage-em {
    background-color: #4380EA;
  }

  .summary_div {
    margin-top: 20px;
    padding-bottom: 20px;
    border-bottom: 10px solid #f2f2f2;
    width: auto;
  }

  .seven_part {
    display: inline-block;
    width: 12.39%;
    border-radius: 4em;
    line-height: 40px;
    position: relative;
    margin-left: 1.5%;
  }

  .seven_part_left_span {
    float: left;
    position: relative;
    left: 20px;
    color: #fff;
  }

  .Grace-font {
    font-size: 18px;
    color: #00deff;
  }

  /*左侧导航*/
  .layui-tab-title li {
    display: block;
  }

  .layui-tab-title {
    float: left;
    width: 130px;
  }

  .layui-tab-content {
    float: left;
    width: 87%;
  }

  .layui-tab-brief>.layui-tab-title .layui-this {
    color: #4380EA;
  }

  .layui-tab-brief>.layui-tab-title .layui-this:after {
    border: none;
    border-radius: 0;
    border-bottom: 2px solid #4380EA;
  }

  .layui-tab-title {
    position: relative;
    left: 0;
    height: 40px;
    white-space: nowrap;
    font-size: 0;
    border-bottom-width: 0px;
    border-bottom-style: solid;
    transition: all .2s;
    -webkit-transition: all .2s;
  }

  .smtz {
    font-size: 16px;
  }

  .zsybs {
    margin-left: 20px;
    margin-right: 0px;
  }

  .el-checkbox__input.is-disabled+span.el-checkbox__label {
    color: #1b1b1b;

  }

  .ivu-input {
    font-size: 14px;
  }

  .margin-40 {
    margin-left: 40px;
    line-height: 50px;
    display: block;
    float: left;
    width: 100px;
  }

  .el-checkbox__input.is-checked+.el-checkbox__label {
    color: #515a6e;
  }

  #info th {
    width: 20%;
  }

  #info td {
    width: 30%;
  }

  .el-checkbox__input.is-disabled .el-checkbox__inner {
    background-color: #f3f3f3;
  }

  .ivu-radio-wrapper {
    margin-left: 20px;
  }

  .ivu-date-picker {
    display: inline;
  }

  #reportform .ivu-input-wrapper {
    width: 60%;
  }

  .ivu-select-single .ivu-select-selection .ivu-select-placeholder,
  .ivu-select-single .ivu-select-selection .ivu-select-selected-value {
    font-size: 14px;
  }

  .yincang {
    display: none;
  }

  #reportform .ivu-input-wrapper {
    width: 45%;
  }

  .margin_defined {
    margin-top: 10px;
  }

  .seven_part_left {
    float: left;
    position: relative;
    color: #fff;
    font-size: 16px;
  }

  .shangbao_part {
    display: inline-block;
    width: 7.39%;
    border-radius: 4em;
    line-height: 40px;
    position: relative;
    margin-left: 1%;
  }

  .el-collapse-item__arrow {
    margin: 0px;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;
    font-weight: bold;
    color: #4380EA;
  }

  .report_width {
    width: 90%;
  }

  .ivu-input-wrapper {
    display: inline-block;
    width: 90%;
    position: relative;
    vertical-align: middle;
    line-height: normal;
  }

  .unit {
    position: absolute;
    right: 20px;
    top: 0;
  }

  /* 心电图集合*/
  input[type="file"] {
    display: none;
  }

  .el-upload-list--picture-card .el-upload-list__item {
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #c0ccda;
    border-radius: 6px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 75px;
    height: 75px;
    margin: 0 8px 8px 0;
    display: inline-block;
  }

  .el-upload--picture-card {
    background-color: #fbfdff;
    border: 1px dashed #c0ccda;
    border-radius: 6px;
    box-sizing: border-box;
    width: 75px;
    height: 75px;
    line-height: 80px;
    vertical-align: top;
  }

  .el-icon-arrow-right:before {
    content: "\e6e0";
    font-size: 20px;
  }

  .el-collapse-item__arrow {
    margin: 0px;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;
    font-weight: bold;
    color: #1b1b1b;
  }

  .el-tooltip__popper[x-placement^=top-start] .popper__arrow {
    border-right-color: #4380EB;
  }

  .el-tooltip__popper[x-placement^=top-start] .popper__arrow:after {
    border-right-color: #4380EB;
  }

  .test {
    background: #4380EB !important;
  }

  .timeLine >>> .el-timeline-item__tail {
      position: absolute;
      left: 4px;
      height: 100%;
      border-left: 2px solid #dfe4ed;
      top: 10px;
  }
  .timeLine >>> .el-timeline-item__node--normal {
      left: -20px;
      width: 50px;
      height: 50px;
      background: #4480ea;
      border: 5px solid #e2e2e2;
      font-size: 15px;
      top: 10px;
      /* z-index: 999; */
  }
  .timeLine >>> .el-timeline-item__icon {
      font-size: 25px;
  }
</style>
